<template>
    <div class="callOrder">
        <wtop></wtop>
        <div class="center">
            <div class="right">
                <!-- <div class="where">当前位置：外呼系统>任务大厅>{{task.name}}任务</div> -->

                <!-- <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                <div class="taskMission" v-loading="loading">
                  <div class="title">任务说明</div>
                  <div class="content">
                    <div class="ht"><div class="tab">发布人：</div>{{task.u_name}}</div>
                    <div class="ht"><div class="tab">外呼目标：</div>{{task.aim}}</div>
                    <div class="ht"><div class="tab">话术要求：</div>{{task.demand}}</div>
                  </div>
                </div> -->
                <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                <div class="taskMission">
                  <div class="title">参数配置</div>
                  <div class="content params">
                    <el-form :inline="true" :model="setParams">
                      <el-form-item label="IP：">
                        <el-input v-model="setParams.ip"></el-input>
                      </el-form-item>
                      <!-- <el-form-item label="Port：">
                        <el-input v-model="setParams.port"></el-input>
                      </el-form-item> -->
                      <!-- <el-form-item label="Line：">
                        <el-select v-model="setParams.line" placeholder="请选择">
                          <el-option
                            v-for="item in lines"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item> -->
                      <el-form-item>
                      <el-button type="danger" @click="saveParams">保存</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                <div v-loading="loading">
                  <div class="powertop">
                      <div :class="tab == 1 ? 'powertopli powertopact' : 'powertopli'" @click="tabChange(1)">未拨打</div>
                      <!-- <div :class="tab == 2 ? 'powertopli powertopact' : 'powertopli'" @click="tabChange(2)">未接通</div> -->
                      <!-- <div :class="tab == 3 ? 'powertopli powertopact' : 'powertopli'" @click="tabChange(3)">未接通</div> -->
                  </div>
                  <div class="conlist" v-if="tab == 1">
                      <div class="flex">
                        <div class="gong gl">
                          <el-form :inline="true" :model="formInline">
                          <el-form-item label="订单来源">
                            <el-input v-model="formInline.source" placeholder="订单来源"></el-input>
                          </el-form-item>
                          <el-form-item label="商品编码">
                            <el-input v-model="formInline.good_sku" placeholder="商品编码"></el-input>
                          </el-form-item>
                          <el-date-picker v-model="times" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期"></el-date-picker>
                            <el-form-item label="退款状态">
                          <el-select v-model="formInline.refund_status" clearable placeholder="请选择">
                            <el-option label="正常" value="100">正常</el-option>
                            <el-option label="退款中" value="200">退款中</el-option>
                            <el-option label="退款成功" value="300">退款成功</el-option>
                          </el-select>
                          </el-form-item>
                          <!-- <el-form-item label="订单创建时间">
                            <el-date-picker v-model="formInline.time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker>
                          </el-form-item> -->
                          <el-form-item>
                            <el-button type="danger" @click="search">检索</el-button>
                          </el-form-item>
                          <div class="btnl">
                              <el-button type="danger" :disabled="noCall" @click="startCall">开始外呼</el-button>
                          </div>
                          </el-form>
                        </div>
                      </div>
                      <div class="list">
                          <div class="th">订单（业务）ID</div>
                          <div class="th">订单来源</div>
                          <div class="th">外部订单编号</div>
                          <div class="th">订单创建时间</div>
                          <div class="th">商品名称</div>
                          <div class="th">商品编码</div>
                          <div class="th">退款状态</div>
                      </div>
                      <div class="list" v-for="(item,index) in myCenter" :key="index">
                          <div class="td">{{item.id}}</div>
                          <div class="td">{{item.source}}</div>
                          <div class="td">{{item.source_id}}</div>
                          <div class="td">{{item.created_at}}</div>
                          <div class="td">{{item.my_gname}}</div>
                          <div class="td">{{item.my_gsku}}</div>
                          <div class="td">{{item.refund_name}}</div>
                      </div>
                      <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                  </div>
                  <!-- <div class="conlist" v-if="tab == 3">
                        <div class="gong ggong">
                          <div>快速标签筛选：</div>
                          <el-button :type="numscreen == 1 ? 'danger' : 'info'" @click="tabfiltrate(1)">已呼过1次</el-button>
                          <el-button :type="numscreen == 2? 'danger' : 'info'" @click="tabfiltrate(2)">已呼过2次</el-button>
                          <el-button :type="numscreen == 3? 'danger' : 'info'" @click="tabfiltrate(3)">3次及以上</el-button>
                        </div>
                          <div class="gl btnl">
                              <el-button type="danger" :disabled="noCall" @click="startCall">开始外呼</el-button>
                          </div>
                      <div class="list">
                          <div class="th">订单（业务）ID</div>
                          <div class="th">订单来源</div>
                          <div class="th tt2">外部订单编号</div>
                          <div class="th">订单创建时间</div>
                          <div class="th">商品名称</div>
                          <div class="th">商品编码</div>
                          <div class="th tt3">退款状态</div>
                          <div class="th tt3">拨打次数</div>
                          <div class="th">短信联系</div>
                      </div>
                      <div class="list" v-for="item in myCenter" :key="item.id">
                          <div class="td">{{item.id}}</div>
                          <div class="td">{{item.source}}</div>
                          <div class="td tt2">{{item.source_id}}</div>
                          <div class="td">{{item.created_at}}</div>
                          <div class="td">{{item.my_gname}}</div>
                          <div class="td">{{item.my_gsku}}</div>
                          <div class="td tt3">{{item.refund_name}}</div>
                          <div class="td tt3">{{item.times}}</div>
                          <div class="td">{{item.last_call_at}}</div>
                      </div>
                      <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                  </div> -->
                </div>
            </div>
        </div>
        <el-dialog class="log t_change_dia" :visible.sync="startcall" width="1550px" @close="callclosed" center :close-on-click-modal="false" :close-on-press-escape="false">
          <template slot="title">
            <div class="kflexc">
              <div style="font-size: 20px; margin-right: 50px; color: rgb(97, 97, 97);">外呼拨打</div>
              <div style="font-size: 14px; margin-right: 50px; color: rgb(97, 97, 97);">工号当前：{{shebei.user}}</div>
              <div style="font-size: 14px; margin-right: 50px; color: rgb(6, 175, 0);" v-if="shoujishebie">电话设备已连接</div>
              <div style="font-size: 14px; margin-right: 50px; color: rgb(97, 97, 97);" v-if="!shoujishebie">电话设备未连接</div>

              <div style="font-size: 14px; margin-right: 50px; color: rgb(6, 175, 0);" v-if="dianxinshebie">电信设备已连接</div>
              <div style="font-size: 14px; margin-right: 50px; color: rgb(97, 97, 97);" v-if="!dianxinshebie">电信设备未连接</div>
            </div>
          </template>
            <div style="border-top: 1px solid #9c9c9c;"></div>
            <div style="display:flex;">
              <el-form style="width: 75%;box-sizing: border-box;padding: 20px 30px;" :model="callform" ref="callform" @submit.native.prevent label-width="110px" >
              <div class="formflex">
                <el-form-item label="订单ID：">
                  <div class="valwidth">{{callform.mission_id}}</div>
                </el-form-item>
                <div class="lineflex">
                  <el-form-item label="订单来源：">
                    <div class="valwidth">{{callform.source}}</div>
                  </el-form-item>
                </div>
                <div class="lineflex">
                  <el-form-item label="外部订单编号：">
                    <div class="intention">{{callform.source_id}}</div>
                  </el-form-item>
                </div>

                <div style="margin-left: 20px;">
                  <el-button type="primary" @click="chuangjiandingdan(callform)" v-if="is_old == 1" plain>创建订单</el-button>
                </div>
              </div>
              <div class="formflex">
                <div class="lineflex">
                  <el-form-item label="订单创建时间：">
                    <div class="intention">{{callform.created_at}}</div>
                  </el-form-item>
                </div>
                <div class="lineflex">
                  <el-form-item label="订单状态：">
                    <div class="intention">{{callform.status_name}}</div>
                  </el-form-item>
                </div>
                <div class="lineflex">
                  <el-form-item label="退款状态：">
                    <div class="intention">{{callform.refund_name}}</div>
                  </el-form-item>
                </div>
                <div class="lineflex">
                  <el-form-item label="激活状态：">
                    <div class="intention">{{callform.active_name}}</div>
                  </el-form-item>
                </div>
              </div>
              <div class="formflex">
                <el-form-item label="用户姓名：">
                  <div class="">{{callform.address_name}}</div>
                </el-form-item>
                <el-form-item label="收货人姓名：">
                  <div class="">{{callform.receive_name}}</div>
                </el-form-item>
                <el-form-item label="身份证：">
                  <div class="">{{callform.id_card_num}}</div>
                </el-form-item>
                <el-form-item label="年龄(周岁)：">
                  <div class="">{{callform.age}}</div>
                </el-form-item>
              </div>
			  <div class="formflex">
				 <el-form-item label="收货省市：">
				   <div class="">{{callform.address_province}} {{callform.address_city}}{{callform.address_district}}{{callform.address}}</div>
				 </el-form-item>
			  </div>

              <div class="formflex" style="margin-bottom: 10px;">
                <el-form-item label="当前拨号：">
                  <div class="mobile" v-if="changeM">{{callform.mobile}}</div>
                  <el-input ref="mobile" v-if="!changeM" v-model="callform.mobile" clearable></el-input>
                </el-form-item>
                <div class="callbtn kflexcc">

                  <div class="kflexcc" @click="call(callform.mobile,'cloud')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(241, 243, 255); border: 1px solid rgb(41, 74, 233); color: rgb(41, 74, 233); margin-left: 20px; cursor: pointer;">

                    <div>电信</div>
                    <div><img src="../../../static/kuanping/dianxin.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
                  </div>
                  <div class="kflexcc" @click="call(callform.mobile,'mobile')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(255, 233, 237);border: 1px solid rgb(207, 0, 38); color: rgb(207, 0, 38); margin-left: 20px; cursor: pointer;">

                    <div>手机</div>
                    <div><img src="../../../static/kuanping/shouji.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
                  </div>
                  <div class="kflexcc" @click="call(callform.mobile,'yidong')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: #EEF7FF;border: 1px solid rgb(224, 48, 109); color: rgb(224, 48, 109); margin-left: 20px; cursor: pointer;">

                    <div>移动</div>
                    <div><img src="../../../static/kuanping/yidong.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
                  </div>

                  <div class="kflexcc" @click="guaduan(callform.mobile)" v-if="!keboda && hujiaozhuangtai.status_name != '已挂断'" style="height: 32px; cursor: pointer; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
                    <div><img src="../../../static/kuanping/guaduan.png" style="width: 20px; margin-right: 10px;" /></div>
                    <div>挂断</div>
                  </div>
                  <span style="color: rgb(150, 150, 150); margin-left: 20px;" v-if="!hujiaozhuangtai.error" :class="hujiaozhuangtai.status_name=='接听中'?'lvse':''">{{hujiaozhuangtai.status_name}}</span>
                  <div  @click="call(callform.mobile,'zaici')" style="color: rgb(0, 126, 255); cursor: pointer; margin-left: 20px;" v-if="hujiaozhuangtai.status_name == '已挂断'">再次拨打</div>

                  <el-button type="primary" v-if="!jiale && callform.is_add_user == 1" round plain style="padding: 0px 20px !important; margin-left: 20px; height: 32px !important; line-height: 32px !important;" @click="tianjiaqiyehaoyou(callform.mobile)" >添加企微好友</el-button>
                  <span style="margin-left: 20px;" v-if="jiale && callform.is_add_user == 1">已发送邀请</span>

                  <el-button v-if="task_info.sms_task_id > 0" @click="faduanxin(callform.mobile)" :disabled="faguoduanxinle" type="primary" round plain style="padding: 0px 20px !important; margin-left: 20px; height: 32px !important; line-height: 32px !important;" >发送短信</el-button>


                </div>
              </div>

              <div class="formflex" style="align-items: center;margin-bottom: 10px;" v-if="callform.is_add_user == 1">
                 <el-form-item label="添加企业好友：">
                   <el-tooltip class="item" effect="dark"  style="margin-left: 20px;" content="用户微信号不是当前联系电话时，可以输入用户微信手机号添加。" placement="top-start">
                   	<i class="el-icon-question" style="color: #409EFF; font-size: 20px; margin-left: 5px; cursor: pointer;" ></i>
                   </el-tooltip>
                   <span>使用其他号码添加：</span>
                   <el-input v-model="xinweixin" size="medium" style="margin-left: 20px; width: 200px;" placeholder="输入号码"></el-input>
                   <el-button type="primary" round plain sstyle="padding: 0px 20px !important; margin-left: 20px; height: 32px !important; line-height: 32px !important;" @click="tianjiaqiyehaoyou2(xinweixin,false)" >添加</el-button>
                 </el-form-item>
              </div>

              <div class="formflex" style="margin-bottom: 10px;" v-if="callform.plan_mobile_produced">
                <el-form-item label="生产号码：">
                  <div class="mobile" v-if="changeM">{{callform.plan_mobile_produced}}</div>
                  <el-input ref="mobile" v-if="!changeM" v-model="callform.plan_mobile_produced" clearable></el-input>
                </el-form-item>
                <div class="callbtn kflexcc">
                  <!-- <div class="kflexcc" @click="call(callform.plan_mobile_produced)" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
                    <div><img src="../../../static/kuanping/boda.png" style="height: 15px; margin-right: 10px;" /></div>
                    <div>拨号</div>
                  </div> -->

                  <div class="kflexcc" @click="call(callform.plan_mobile_produced,'cloud')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(241, 243, 255); border: 1px solid rgb(41, 74, 233); color: rgb(41, 74, 233); margin-left: 20px; cursor: pointer;">
                    <div>电信</div>
                    <div><img src="../../../static/kuanping/dianxin.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
                  </div>
                  <div class="kflexcc" @click="call(callform.plan_mobile_produced,'mobile')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(255, 233, 237);border: 1px solid rgb(207, 0, 38); color: rgb(207, 0, 38); margin-left: 20px; cursor: pointer;">

                    <div>手机</div>
                    <div><img src="../../../static/kuanping/shouji.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
                  </div>
                  <div class="kflexcc" @click="call(callform.plan_mobile_produced,'yidong')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: #EEF7FF;border: 1px solid rgb(224, 48, 109); color: rgb(224, 48, 109); margin-left: 20px; cursor: pointer;">

                    <div>移动</div>
                    <div><img src="../../../static/kuanping/yidong.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
                  </div>

                  <div class="kflexcc" @click="guaduan(callform.plan_mobile_produced)" v-if="!keboda && hujiaozhuangtai.status_name != '已挂断'" style="height: 32px; cursor: pointer; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
                    <div><img src="../../../static/kuanping/guaduan.png" style="width: 20px; margin-right: 10px;" /></div>
                    <div>挂断</div>
                  </div>
                  <span style="color: rgb(150, 150, 150); margin-left: 20px;" v-if="!hujiaozhuangtai.error" :class="hujiaozhuangtai.status_name=='接听中'?'lvse':''">{{hujiaozhuangtai.status_name}}</span>
                  <div  @click="call(callform.plan_mobile_produced,'zaici')" style="color: rgb(0, 126, 255); cursor: pointer; margin-left: 20px;" v-if="hujiaozhuangtai.status_name == '已挂断'">再次拨打</div>

                  <el-button type="primary" v-if="!jiale2 && callform.is_add_user == 1" round plain style="padding: 0px 20px !important; margin-left: 20px; height: 32px !important; line-height: 32px !important;" @click="tianjiaqiyehaoyou2(callform.plan_mobile_produced,true)" >添加企微好友</el-button>
                  <span style="margin-left: 20px;" v-if="jiale2 && callform.is_add_user == 1">已发送邀请</span>

                </div>
              </div>

              <div class="formflex">
                <el-form-item label="订单信息：">
                  <div class="kflex" >
                    <div style="width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">商品名称：
                      <el-tooltip class="item" effect="dark" :content="callform.my_gname" placement="top-start">
                            <span>{{callform.my_gname}}</span>
                      </el-tooltip>
                    </div>
                    <div style="width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">商品编码：
                      <el-tooltip class="item" effect="dark" :content="callform.my_gsku" placement="top-start">
                            <span>{{callform.my_gsku}}</span>
                      </el-tooltip>
                    </div>
                    <div style="width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">生产号码：
                      <el-tooltip class="item" effect="dark" :content="callform.plan_mobile_produced" placement="top-start">
                            <span>{{callform.plan_mobile_produced}}</span>
                      </el-tooltip>
                    </div>
                    <div style="width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">ICCID：
                      <el-tooltip class="item" effect="dark" :content="callform.iccid" placement="top-start">
                            <span>{{callform.iccid}}</span>
                      </el-tooltip>
                    </div>

                    <div><el-button type="primary" round plain  @click="xiugaishangpin()">修改商品</el-button></div>
                  </div>
                  <!-- <div class="remarkBox">
                    <el-form-item label="商品名称：">
                      <div class="intention">{{callform.my_gname}}</div>
                    </el-form-item>
                    <el-form-item label="商品编码：">
                      <div class="intention">{{callform.my_gsku}}</div>
                    </el-form-item>
                    <el-form-item label="生产号码：">
                      <div class="intention">{{callform.plan_mobile_produced}}</div>
                    </el-form-item>
                    <el-form-item label="ICCID：">
                      <div class="intention"></div>
                    </el-form-item>
                  </div> -->
                </el-form-item>
              </div>


              <div class="formflex">
                <el-form-item label="失败原因：">
                  <div class="intention">{{callform.reason}}</div>
                </el-form-item>
              </div>
             <!-- <div class="formflex">
                <el-form-item label="产品名：">
                  <div class="intention">{{callform.product}}</div>
                </el-form-item>
              </div>
              <div class="formflex">
                <el-form-item label="地址：">
                  <div class="intention">{{callform.address}}</div>
                </el-form-item>
              </div> -->
              <div class="formflex">
                <el-form-item label="话术要求：">
                  <div class="intention" v-html="callform.demand"></div>
                </el-form-item>
              </div>
              <div class="formflex col">
                <div style="font-weight: bold;">历史外呼记录：</div>
                <div class="logs">
                  <div class="log">
                    <div class="ls">
                    <div class="list" v-for="(item,index) in logs" :key="index">
                      <div style="width: 250px; text-align: left;">{{item.created_at}}</div>
                      <div style="width: 250px; text-align: left;" class="status" :class="item.called == '已接通' ? 'sucess' : item.called == '未接通' ? 'error' : ''">是否接通：{{item.called}}</div>
                      <div style="width: 250px; text-align: left;" class="time" :class="item.called == '已接通' ? 'sucess' : item.called == '未接通' ? 'error' : ''">时长：{{item.time}}</div>
                      <!-- <div class="outperson">外呼人：{{XXXXX}}</div> -->
                      <div style="width: 250px; text-align: left;" class="remark">备注：{{item.remark}}</div>
                      <div style="flex-grow: 1;" class="audioplay" v-if="item.record">
                      	<audio class="audio" controls>
                          <source :src="item.record" type="audio/mpeg">
                      		<!-- <source :src="'/storage/upload/record/'+item.record" type="audio/mpeg"> -->
                      		您的浏览器不支持 audio 元素。
                      	</audio>
                      </div>
                      <div style="flex-grow: 1;" class="audioplay" v-if="!item.record">
                      	无录音
                      </div>
                    </div>
                  </div>

                  </div>
                </div>
              </div>
                <el-form-item label="设置意向标签：" class="listtag">

                  <el-button v-for="(item,index) in tagList" :key="index" :type="callform.tag == item.id ? 'danger' : 'info'" @click="wantswitch(item)">{{item.name}}</el-button>

                  <el-button type="text" v-if="!showTagValue" @click="addTag">+新建标签</el-button>

                  <el-button type="text" @click="deltag">删除选中标签</el-button>

                  <div v-if="showTagValue" style="display: inline-flex;">
                    <el-input ref="tagValue" v-model="addTagValue"></el-input>
                    <el-button type="primary" @click="saveTagValue" style="margin-left: 10px;">保存</el-button>
                  </div>
                </el-form-item>
                <div class="formflex">
                  <el-form-item label="修改旗帜：">
                    <div class="intention">
                      <el-radio-group v-model="flagradio" style="display: flex;">
                        <div v-for="item in flaglist" :key="item.id">
                          <el-radio :label="item.type">
                            <span :style="{color:item.color,fontSize:'30px',marginRight:'20px'}" class="iconfont icon-flag-fill"></span>
                          </el-radio>
                        </div>
                      </el-radio-group>
                    </div>
                  </el-form-item>
                </div>
                <el-form-item label="拨打备注：" class="listtag" style="margin-bottom: 10px;">
                  <el-input type="textarea" :rows="3" v-model="callform.remark"></el-input>
                </el-form-item>
                <div class="formflex formsubmit">
                  <el-button type="danger" @click="noPass">标记未接通</el-button>
                  <el-button type="success" @click="sendCalll">标记已接通</el-button>
                  <el-button type="success" @click="smscontact">短信已联系</el-button>
                  <div @click="lhclick" style="cursor: pointer;" v-if="!islh" class="t_lhbox" >
                    <img src="../../../static/img/wlh.png" >
                    拉黑该订单
                  </div>
                  <div v-else class="t_lhbox" >
                    <img src="../../../static/img/lh.png" >
                    已拉黑
                  </div>
                  <!-- <div class="collection" v-if="collect===1"><i class="el-icon-star-off"></i>添加收藏</div>
                  <div class="collection" v-if="collect===0"><i class="el-icon-star-on"></i>已收藏</div> -->
                </div>
              </el-form>
              <div style="width: 25%;box-sizing: border-box;border-left: 1px solid #9C9C9C;">
                  <div class="t_cllc_title">历史外呼记录</div>
                  <div  class="t_lc_box">
                    <div v-for="(item,index) in bzlist" :key="index" class="t_lc_item" >
                      <div style="color: #9f9f9f;font-size: 14px;">{{ item.created_at }}</div>
                      <div v-if="item.type==3" style="font-size: 14px;"  class="t_speak_red" >{{ item.content }}</div>
                      <div v-else style="color: #333333;font-size: 14px;" v-html="item.content"  ></div>
                    </div>

                  </div>
                  <el-input type="textarea" v-model="sendmsg" :rows="8" resize='none' placeholder="请输入留言内容按Ctrl+Enter发送" @keydown.ctrl.enter.native="send()"  ></el-input>
              </div>
            </div>

        </el-dialog>
        <el-dialog title="手机设备未连接" :visible.sync="logerror" width="1000px" center :close-on-click-modal="false" :close-on-press-escape="false">
          <div>{{cuowu}}</div>
          <span slot="footer" class="dialog-footer">
          	<el-button type="danger" round @click="logerror = false">确定</el-button>
          </span>
        </el-dialog>
        <wfoot></wfoot>
        <xiugaishangpin :id="xiugaishangpinid" @xiugaishangpinwan="xiugaishangpinwan" ref="xiugaishangpin"></xiugaishangpin>

        <chuangjiandingdand :all="chuangjiandingdanall" v-if="chuangjiandingdanlog" @chuangjiango="chuangjiango"></chuangjiandingdand>
    </div>

</template>

<script>
    import xiugaishangpin from './zujian/gaishangpin.vue'
    import chuangjiandingdand from './zujian/chuangjiandingdan.vue'
    import axios from 'axios'
    import wtop from '@/components/callsystem/wtop.vue'
    import wfoot from '@/components/callsystem/wfoot.vue'
    import moment from "moment";
    import all from '@/assets/all.js'

    export default {
        components: {
            "wtop": wtop,
            "wfoot": wfoot,
            xiugaishangpin,chuangjiandingdand
        },
        name: "callOrder",
        data() {
            return {

                id: '',
                setParams: {
                  ip: '',
                  port: 1818,
                  line: 1,
                },
                lines: [
                  {label: '1线', value: 1},
                  // {label: '2线', value: 2},
                  // {label: '3线', value: 3},
                  // {label: '4线', value: 4},
                  // {label: '5线', value: 5},
                  // {label: '6线', value: 6},
                  // {label: '7线', value: 7},
                  // {label: '8线', value: 8},
                ],

                formInline:{
                  source: '',
                  refund_status: '',
                  time: [],
                  good_sku:""
                },
                taskTypeList:[],

                total:0,
                pagesize:20,
                page:1,
                list:[],
                loading: false,
                startcall: false,
                tab: 1,
                numscreen: '',
                want_addtag: 0,
                want_text: '',
                collect: 1,
                task: {
                  name: '',
                  u_name: '',
                  aim: '',
                  demand: ''
                },
                myCenter: [],
                callStatus: 0,
                calltag: 0,
                callform: {
                  id: '',
                  mobile: '',
                  tag: 0,
                  user_info: '',
                  remark: ''
                },
                flagradio: 0,
                noCall: false,
                cancall: false,
                canCall: false,
                nopass: 2, //已接通
                logs: [],

                changeM: true, // 修改号码
                remark1: false,
                remark2: false,
                remark3: false,
                tagList: [],
                showTagValue: false,
                addTagValue: '',
                demand: '',
                ipshow: false,

                flaglist: [],
                smsContact: '',
                times:[],
                detailx:{
                  detail:"",
                  logs:"",
                  task:""
                },
                jiale:false,
                ws:"",
                shebei:{
                  device_id:"",
                  user:""
                },
                hujiaozhuangtai:{
                  status_name:"",
                  error:""
                },
                keboda:true,
                log_id:"",
                logerror:false,
                xinweixin:"",
                cuowu:'未检测到您的账号登录手机拨号APP，请先登录手机设备后再拨打',
                jiale2:false,

                xiugaishangpinid:"",
                terminal:"",
                dianxinshebie:"",
                shoujishebie:"",
                sendmsg:'',
                islh:false,
                bzlist:[],

                chuangjiandingdanlog:false,
                chuangjiandingdanall:"",
                is_old:0,
                task_info:"",


                faguoduanxinle:false
              }
        },
        created() {
          this.id = this.$route.query.id
          if(!JSON.parse(localStorage.getItem('CALL_OUT'))){
            localStorage.setItem('CALL_OUT', JSON.stringify(this.setParams))
          }
          if(JSON.parse(localStorage.getItem('CALL_OUT'))){
            var setParams = JSON.parse(localStorage.getItem('CALL_OUT'))
          }
          this.getUserIP((ip) => {
            this.setParams.ip = ip;
            if(!ip){
              this.setParams.ip = setParams.ip
            }
          });
          // this.sevenDay()
          this.getlist()
          this.getproductstype()
          this.getflag()
        },
        mounted() {
          //获取device——id
          axios.get("/api/plan-market/call/user/device")
            .then(response=>{
          	  if(response.data.msg.code == 0){
                this.shebei = response.data.data
                if(this.shebei.list && this.shebei.list.length>0){
                  this.shebei.list.forEach(item=>{
                    if(item.terminal == 'cloud'){
                      this.dianxinshebie = item.device_id
                    }
                    if(item.terminal == 'mobile'){
                      this.shoujishebie = item.device_id
                    }
                  })

                }
          	  }else{
          	  	this.$message.error(response.data.msg.info);
          	  }
            })
          this.websocket2()
        },
        beforeDestroy() {
          this.ws = ''
        },
        methods: {



          chuangjiango:function(){
            this.chuangjiandingdanlog = false
          },
          chuangjiandingdan:function(item){
            this.chuangjiandingdanall = JSON.parse(JSON.stringify(item))
            this.chuangjiandingdanlog = true
            console.log(this.chuangjiandingdanlog)
          },


          xiugaishangpinwan:function(){
            axios.get("/api/plan-market/order/detail?order_id="+this.xiugaishangpinid)
              .then(response => {
                  this.infoobj.product_sku = response.data.data.product_sku
                  this.infoobj.source_sku = response.data.data.source_sku
              });
          },
          xiugaishangpin:function(){
            this.$refs.xiugaishangpin.fixprolog = true
          },

          smscontact(){
            new Promise((resolve, reject) => {
              this.flagloggo()
              resolve(this.callform.remark);
            }).then(res => {
              this.smsContact = 1
              this.sendForm('callform')
            })
          },
          //标旗
          flagloggo: function() {
            axios
              .post("/api/plan-market/order/flag", {
                color: this.flagradio,
                id: this.callform.mission_id,
                memo: '拨打备注：' + this.callform.remark
              })
              .then(response => {

                // this.loading = true;
                // this.flaglog = false;
                // this.getlist();
              });
          },
          //获取旗子
          getflag: function() {
            axios.get("/api/gth/shop/flag/info").then(response => {
              for (var i in response.data.data) {
                if (response.data.data[i].type == 0) {
                  response.data.data[i].color = "#e4dfd7";
                }
                if (response.data.data[i].type == 1) {
                  response.data.data[i].color = "#ee3f4d";
                }
                if (response.data.data[i].type == 2) {
                  response.data.data[i].color = "#ebb10d";
                }
                if (response.data.data[i].type == 3) {
                  response.data.data[i].color = "#229453";
                }
                if (response.data.data[i].type == 4) {
                  response.data.data[i].color = "#2775b6";
                }
                if (response.data.data[i].type == 5) {
                  response.data.data[i].color = "#8076a3";
                }
              }

              this.flaglist = response.data.data;
            });
          },
          sevenDay(){
            this.formInline.time[1] = moment()
            .format("YYYY-MM-DD");
            //前七天
            this.formInline.time[0] = moment()
            .subtract(7, "days")
            .format("YYYY-MM-DD");
          },
          //获取产品类型
          getproductstype:function(){
          	var that = this
          	axios.get("/api/plan-market/call/config/list")
          	  .then(function(response) {
          		  if(response.data.msg.code == 0){
                  that.taskTypeList = response.data.data
          		  }else{
          		  	that.$message.error(response.data.msg.info);
          		  }

          	  })
          },
          //删除标签
          deltag:function(){
            var that = this
            axios.post("/api/plan-market/call/tag/delete",{id:this.callform.tag})
              .then(function(response) {
            	  if(response.data.msg.code == 0){
                  that.moretagList()
                  that.$message.success('标签删除成功');
            	  }else{
            	  	that.$message.error(response.data.msg.info);
            	  }
              })
          },
          //新建标签
          addTag(){
            this.showTagValue = true
            this.$nextTick(_ => {
              this.$refs.tagValue.$refs.input.focus()
            })
          },
          saveTagValue(){
            var that = this
            axios.post("/api/plan-market/call/task/tag", {name:this.addTagValue})
              .then(function(response) {
                  if (response.data.msg.code == 0) {
                      that.showTagValue = false
                      that.addTagValue = ''
                      that.moretagList()
                  }else{
                      that.$message.error(response.data.msg.info);
                  }
              })
          },
          //意向标签
          moretagList(){
            var that = this
            axios.get("/api/plan-market/call/tag/list")
              .then(function(response) {
                  if (response.data.msg.code == 0) {
                    that.tagList = response.data.data
                  }else{
                      that.$message.error(response.data.msg.info);
                  }
              })
          },
          //修改号码
          changeMobile(){
            this.changeM = false
            this.cancall = true
            this.$nextTick(_ => {
              this.$refs.mobile.$refs.input.focus()
            })
          },
          saveMobile(){
            // if(!(/^1[3456789]\d{9}$/.test(this.callform.mobile))){
            //   this.$message.error('号码格式错误，请仔细检查~');
            //   return
            // }
            var that = this
            axios.post("/api/plan-market/call/detail/update", {id: this.callform.id,mobile:this.callform.mobile})
              .then(function(response) {
                  if (response.data.msg.code == 0) {
                      that.changeM = true
                      that.cancall = false
                  }else{
                      that.$message.error(response.data.msg.info);
                  }
              })
          },
          //websocket服务
          websocket() {
            var that = this
            if(typeof(WebSocket) === "undefined"){
                 this.$message.error("您的浏览器不支持socket")
            }else{
                // 实例化socket
                let ws_address = 'ws://' + this.setParams.ip + ':' + this.setParams.port
                var timestamp = new Date().getTime()
                var socket = new WebSocket(ws_address)
                socket.onopen = function(){
                  socket.send("line="+that.setParams.line+"number=STOPcallOrderId="+timestamp*1000)
                }
            }
          },
          websocket1(number) {
            var that = this
            if(typeof(WebSocket) === "undefined"){
                 this.$message.error("您的浏览器不支持socket")
            }else{
                // 实例化socket
                let ws_address = 'ws://' + this.setParams.ip + ':' + this.setParams.port
                var timestamp = new Date().getTime()
                var socket = new WebSocket(ws_address)
                socket.onopen = function() {
                  socket.send("line="+that.setParams.line+"number="+number+"callOrderId="+timestamp)
                  setTimeout(() => {
                    that.canCall = false
                    that.$message.success("外呼成功，请拿起电话~")
                  },1500)  //避免服务反应迟钝，延时一秒，可适当延长
                }
            }
          },
      faduanxin:function(){
        this.faguoduanxinle = true
        axios.post("/api/plan-market/call/sms/send",{
          mobile:this.detailx.detail.mobile,
          task_id:this.task_info.id,
          order_id:this.detailx.detail.order_id
        })
          .then(response => {
            if (response.data.msg.code == 0) {
                this.$message.success('已发送短信');
            }else{
                this.faguoduanxinle = false
                this.$message.error(response.data.msg.info);
            }
          });
      },
      tianjiaqiyehaoyou2:function(mobile,b){
        if(this.detailx.task.crowd_id == 0 && this.detailx.task.is_add_user == 1){
          axios
            .get("/api/plan-market/call/task/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&order_id='+this.callform.mission_id+'&new_mobile='+mobile+'&task_id='+this.task_info.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale2 = b
            });
        }else{
          axios
            .get("/api/plan-market/crowd/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&order_id='+this.callform.mission_id+'&new_mobile='+mobile+'&task_id='+this.task_info.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale2 = b
            });
        }
      },
      tianjiaqiyehaoyou:function(){
        if(this.detailx.task.crowd_id == 0 && this.detailx.task.is_add_user == 1){
          axios
            .get("/api/plan-market/call/task/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&mobile='+this.detailx.detail.mobile+'&task_id='+this.task_info.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale = true
            });
        }else{
          axios
            .get("/api/plan-market/crowd/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&mobile='+this.detailx.detail.mobile+'&task_id='+this.task_info.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale = true
            });
        }

      },
          websocket2() {
            var that = this
            if(typeof(WebSocket) === "undefined"){
                 this.$message.error("您的浏览器不支持socket")
            }else{
                if(location.href.includes('118.190.155.55') || location.href.includes('localhost')){

                  this.ws = new WebSocket("ws://118.190.155.55:8995");
                }else{
                  this.ws = new WebSocket("wss://ws.91haoka.cn:8995");
                }
                //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
                this.ws.onopen = function(){
                　　//当WebSocket创建成功时，触发onopen事件
                   console.log("open");
                }
                this.ws.onmessage = function(e){
                    console.log('onmessage')
                    console.log(e.data)

                　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                    // JSON.parse(e.data) == 'what'  不知道干啥的回复
                    if(JSON.parse(e.data) == 'what' || JSON.parse(e.data).type == '@heart@' || JSON.parse(e.data).status_name == '连接成功'  ){

                    }else{
                  if(JSON.parse(e.data) == 'failed' || JSON.parse(e.data).error){
                      console.log(JSON.parse(e.data).error)
                      that.hujiaozhuangtai.status_name = ""
                  		that.cuowu = '未检测到您的账号登录手机拨号APP，请先登录手机设备后再拨打'
                      if(JSON.parse(e.data).error == '未连接'){
                        that.cuowu = JSON.parse(e.data).error
                        axios.get("/api/plan-market/call/user/device")
                          .then(response=>{
                        	  if(response.data.msg.code == 0){
                              that.shebei = response.data.data
                              if(that.shebei.list && that.shebei.list.length>0){
                                that.shebei.list.forEach(item=>{
                                  if(item.terminal == 'cloud'){
                                    that.dianxinshebie = item.device_id
                                  }
                                  if(item.terminal == 'mobile'){
                                    that.shoujishebie = item.device_id
                                  }
                                })

                              }

                        	  }else{
                        	  	that.$message.error(response.data.msg.info);
                        	  }
                          })
                      }

                      console.log('出错了')
                      that.logerror = true
                      that.keboda = true
                    }else{

                      if(JSON.parse(e.data).status_name == '已连接'){
                        that.hujiaozhuangtai = JSON.parse(e.data)
                        axios.get("/api/plan-market/call/user/device")
                          .then(response=>{
                        	  if(response.data.msg.code == 0){
                              that.shebei = response.data.data
                              that.shebei.list.forEach(item=>{
                                if(item.terminal == 'cloud'){
                                  that.dianxinshebie = item.device_id
                                }
                                if(item.terminal == 'mobile'){
                                  that.shoujishebie = item.device_id
                                }
                              })
                        	  }else{
                        	  	that.$message.error(response.data.msg.info);
                        	  }
                          })
                      }else{
                        that.hujiaozhuangtai = JSON.parse(e.data)
                        that.keboda = false
                      }

                      // if(that.hujiaozhuangtai.status_name == '已挂断'){
                      //   that.keboda = true
                      // }
                    }
              }

                }
                this.ws.onclose = function(e){
                　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
                　　console.log("close");
                    this.ws = ""
                }
                this.ws.onerror = function(e){
                    console.log('onerror')
                　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
                　　console.log(error);
                }
            }
          },
          bodago:function(log_id,mobile,terminal){
            let d = ""
            if(terminal == 'mobile'){
              d = this.shoujishebie
            }
            if(terminal == 'cloud'){
              d = this.dianxinshebie
            }
            let obj = {
              type:"call_start",
              device_id:d,
              mobile:mobile,
              log_id:this.log_id,
              operation_type:"call_start",
              terminal:terminal,
			  tab:"call"
            }
            this.ws.send(JSON.stringify(obj));
          },
          guaduan:function(mobile){
            let d = ""
            if(this.terminal == 'mobile'){
              d = this.shoujishebie
            }
            if(this.terminal == 'cloud'){
              d = this.dianxinshebie
            }
            let obj = {
              type:"call_start",
              device_id:d,
              mobile:mobile,
              log_id:this.log_id,
              operation_type:"call_off",
              terminal:this.terminal,
			  tab:"call"
            }
            this.ws.send(JSON.stringify(obj));
          },


          getUserIP(onNewIP) {
              let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
              let pc = new MyPeerConnection({
                  iceServers: []
                });
              let noop = () => {
                };
              let localIPs = {};
              let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
              let iterateIP = (ip) => {
                if (!localIPs[ip]) onNewIP(ip);
                localIPs[ip] = true;
              };
              pc.createDataChannel('');
              pc.createOffer().then((sdp) => {
                sdp.sdp.split('\n').forEach(function (line) {
                  if (line.indexOf('candidate') < 0) return;
                  line.match(ipRegex).forEach(iterateIP);
                });
                pc.setLocalDescription(sdp, noop, noop);
              }).catch((reason) => {
              });
              pc.onicecandidate = (ice) => {
                if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
                ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
              };
          },
          // //保存参数
          saveParams(){
            localStorage.setItem('CALL_OUT', JSON.stringify(this.setParams))
            this.$message.success('参数配置成功！');
          },

          callclosed(){
            this.canCall = false
            this.startcall = false
            this.changeM = true
            this.showTagValue = false
            this.want_text = ''
            this.flagradio = 0
            this.getlist()
          },
          noPass(){
            new Promise((resolve, reject) => {
              this.flagloggo()
              resolve(this.callform.remark);
            }).then(res => {
              this.nopass = 1
              // this.callform.tag = 0
              // this.callform.remark = ''
              this.sendForm('callform')
            })
          },
          sendCalll(){
            this.flagloggo()
            this.sendForm('callform')
          },
          //拨打
          call(mobile,terminal){
            console.log(terminal)
            //添加列表
            this.upbzlist(1,'')
            var that = this
            this.keboda = false
            this.canCall = true
            if(terminal != 'zaici'){
              this.terminal = terminal
            }
            // that.$message.warning("正在连接服务，请勿拿起电话~");
            if(terminal != 'yidong'){
              axios.post("/api/plan-market/call/detail/can", {id: this.callform.id,order: 1,mobile:mobile})
                .then(function(response) {
                    if (response.data.msg.code == 0) {
                      that.log_id = response.data.data.log_id
                      that.bodago(response.data.data.log_id,mobile,that.terminal)
                    }else{
                        that.$message.error(response.data.msg.info);
                    }
                })
            }else{
              axios.post("/api/plan-market/call/detail/can", {id: this.callform.id,order: 1,mobile:mobile})
                .then(function(response) {
                    if (response.data.msg.code == 0) {
                      that.log_id = response.data.data.log_id
                    }else{
                      that.$message.error(response.data.msg.info);
                    }
                })
            }


          },
          //开始外呼
          startCall(){
            this.hujiaozhuangtai = {
              status_name:"",
              error:""
            }
            this.keboda = true

            this.jiale = false
            this.startcall = true
            var that = this

            var start = ''
            var end = ''
            console.log(this.times)
            if(this.times != '' && this.times != null){
              start = this.times[0]
              end = this.times[1]
            }else{
              start = ''
              end = ''
            }
			that.logs = ""
            axios.get(`/api/plan-market/call/task/order_detail?task_id=${this.id}&called=${this.callStatus}&times=${this.numscreen}&source=${this.formInline.source}&good_sku=${this.formInline.good_sku}&refund_status=${this.formInline.refund_status}&start=${start}&end=${end}`)
            	.then(response => {
            		if(response.data.msg.code == 0){
                      if(response.data.data.details){
                        that.moretagList()
                        // that.callform = response.data.data

                        this.task_info = response.data.data.task_info

                        this.is_old = response.data.data.task_info.is_old
                        var callform = response.data.data.task
                        callform.tag = response.data.data.details.tag
                        callform.mission_id = response.data.data.details.mission_id
                        that.xiugaishangpinid = response.data.data.details.order_id
                        callform.remark = ''
                        that.callform = callform
                        //获取拉黑状态
                        this.getlhtype(callform.mission_id)
                        //获取备注列表
                        this.getbzlist(callform.mission_id)
                        axios.get("/api/plan-market/call/detail/info?id="+that.callform.id)
                          .then(function(response) {
                              if (response.data.msg.code == 0) {
                                  that.logs = response.data.data.logs
                                  that.detailx = response.data.data
                                  for (let i in that.logs) {
                                  									that.logs[i].called = that.logs[i].called == 1 ? '未接通' : that.logs[i].called == 2 ? '已接通' : ''
                                  if(that.logs[i].record){
                                    if(that.logs[i].record.includes('https')){

                                    }else{
                                      if(that.logs[i].record.includes('http')){
                                        that.logs[i].record.replace("http", "https")
                                      }else{
                                        that.logs[i].record = "https://call.91haoka.cn/" + that.logs[i].record
                                      }
                                    }
                                  }

                                  								}
                              }else{
                                  that.$message.error(response.data.msg.info);
                              }
                          })
                        axios.get("/api/plan-market/order/memo?id=" + that.callform.mission_id).then(response => {
                          that.flagradio = response.data.data.flag;
                          // that.remark = response.data.data.memo
                        });
                      }else{
                        that.$message.success('任务外呼完毕，已经没有更多号码了^_^');
                        that.startcall = false
                      }
            		}else{
            			that.$message.error(response.data.msg.info);
            		}
            	})
          },
         tabChange:function(o) {
           this.tab = o;
           this.page = 1
           //调接口
           if(this.tab == 1){
             this.callStatus = 0
             this.numscreen = ''
           }
           // if(this.tab == 2){
           //   this.callStatus = 2
           // }
           if(this.tab == 3){
             this.callStatus = 1
             this.formInline.source = ''
             this.formInline.refund_status = ''
             this.formInline.time = []
           }
           this.getlist()
         },
         //开始外呼窗口 意向切换
         wantswitch(item){
           console.log(item,this.callform.tag);
           //添加列表
           this.upbzlist(3,item.name)
           this.callform.tag = item.id;
           this.want_text = item.name
           this.callform.remark += item.name
         },
         tabfiltrate(o){
           this.numscreen = o
           this.getlist()
         },
          //保存并下一个
          sendForm(formName){
            this.canCall = false
            this.$refs[formName].resetFields();
            // let audio = document.getElementById('audio');
            // audio.pause()
            // audio.currentTime = 0;
            this.saveCall()
          },
          search:function(){
            this.page = 1
            this.getlist()
          },
          //翻页
          fanye:function(page){
            this.loading = true
            this.page = page
            this.getlist()
          },
          //保存
          saveCall(){
            var that = this
            let data = {}
            data.order = 1
            data.id = this.callform.id
            data.tag = this.callform.tag
            data.remark = this.callform.remark
            data.called = this.nopass
            data.is_sms = this.smsContact
            axios.post('/api/plan-market/task/detail/tag', data)
            	.then(response => {
            		if(response.data.msg.code == 0){
                  that.nopass = 2
                  that.smsContact = ''
                  that.$message.success('保存成功进入下一个，继续加油哦~');
                  // that.getlist()
                  that.startCall()

                  this.jiale = false
                  this.jiale2 = false
                  this.xinweixin = ""

                  this.faguoduanxinle = false
            		}else{
            			that.$message.error(response.data.msg.info);
            		}
            	})
          },
          //获取列表
          getlist:function(){
              var that = this
              this.loading = true

              var start = ''
              var end = ''
              console.log(this.times)
              if(this.times != '' && this.times != null){
                start = this.times[0]
                end = this.times[1]
              }else{
                start = ''
                end = ''
              }
              //&start=${this.formInline.time[0]}&end=${this.formInline.time[1]}
              axios.get(`/api/plan-market/call/task/order_list?page=${this.page}&page_size=${this.pagesize}&task_id=${this.id}&source=${this.formInline.source}&good_sku=${this.formInline.good_sku}&refund_status=${this.formInline.refund_status}&called=${this.callStatus}&times=${this.numscreen}&start=${start}&end=${end}`)
                .then(response => {
                  if(response.data.msg.code == 0){
                    // that.task = response.data.data.task
                    // that.myCenter = response.data.data.details.data
                    // that.total = response.data.data.details.total
                    that.myCenter = response.data.data.data
                    that.total = response.data.data.total
                    that.loading = false
                    this.noCall = that.total == 0 ? true : false
                  }else{
                    that.$message.error(response.data.msg.info);
                  }
                })
            },
            send() {
              if(this.sendmsg==''){
                this.$message.error('请输入内容');
              }else{
                var str = this.sendmsg
                str = str.replace(/\n/g,"<br>");
                //添加列表
                this.upbzlist(2,str)
              }

              console.log("按住ctrl+enter时触发")
            },
            //拉黑
            lhclick(){
              this.$confirm('是否确认拉黑？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axios.post("/api/plan-market/call/order/black", {order_id: this.callform.mission_id})
                .then((response)=>{
                    if (response.data.msg.code == 0) {
                      this.$message({
                        type: 'success',
                        message: '操作成功!'
                      });
                      this.islh = true
                    }else{
                      this.$message.error(response.data.msg.info);
                    }
                })

              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });
              });
            },
            //获取拉黑状态
            getlhtype(id){
              axios.get("/api/plan-market/call/order/black/check",{
                params:{order_id: id}
              } )
                .then((response)=>{
                    if (response.data.msg.code == 0) {
                      console.log('拉黑状态')
                      console.log(response.data.data.is_black.toString())
                      if(response.data.data.is_black.toString()=='0'){
                        this.islh = false
                      }else{
                        this.islh = true
                      }
                    }else{
                      this.$message.error(response.data.msg.info);
                    }
                })
            },
            //添加列表
            upbzlist(type,con){

              if(type==1){
                //开始拨打
                var content = this.shebei.user+'开始外呼，任务：'+this.callform.task_name
              }
              if(type==2){
                //备注
                var content = this.shebei.user+'备注：'+con
              }
              if(type==3){
                //标签
                var content = this.shebei.user+'标记：'+con
              }

              axios.post("/api/plan-market/call/order/operate/record/add", {
                order_id: this.callform.mission_id,
                content: content,
                type: type,
              })
                .then((response)=>{
                    if (response.data.msg.code == 0) {
                      this.sendmsg = ''
                      //获取备注列表
                      this.getbzlist(this.callform.mission_id)
                    }else{
                      this.$message.error(response.data.msg.info);
                    }
                })
            },
            //获取备注列表
            getbzlist(id){
              axios.get("/api/plan-market/call/order/operate/record/list",{
                params:{order_id: id}
              } )
                .then((response)=>{
                    if (response.data.msg.code == 0) {
                      console.log('备注列表')
                      console.log(response)
                      this.bzlist = response.data.data
                    }else{
                      this.$message.error(response.data.msg.info);
                    }
                })
            }
        }
    }
</script>
<style>
  .callOrder .log .el-dialog{ margin-top: 5vh !important;}
  .callOrder .log .el-form-item{
    margin-bottom: 0;
  }
</style>
<style scoped>
.t_cllc_title{
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
  font-size: 20px;
}
.t_lc_box{
	padding: 20px;
	box-sizing: border-box;
	height: calc(100vh - 400px);
	/* border: 1px solid red; */
	overflow: auto;
}
.t_lc_item{
	margin-bottom: 20px;
}
.t_speak_red{
	color: #FF0C0C;
}
.t_lhbox{
  display: flex;
  font-size: 14px;
  align-items: center;

  margin-left: 20px;
}
.t_lhbox img{
  height: 14px;
  margin-right: 5px;
}
/deep/.t_change_dia .el-dialog--center .el-dialog__body{
  padding:5px 0 0 0
}
</style>
<style lang="scss" scoped>
    .callOrder{ margin: 0; padding: 0; background: #EFEFEF;
        .listtag{ font-size: 14px;
          .el-form-item__label{font-weight: bold;}
            .el-button--danger{padding: 9px 30px!important;}

        }
        .center{ min-width: 1366px;width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
    		.right{ flex-basis: 1366px; background: #ECECEC;
              .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
              .taskMission{
                background: #fff;font-size: 14px;
                .content{padding: 20px 20px;color: #727272;font-size: 14px;
                  .ht{padding-bottom: 20px;display: flex;
                    .tab{width: 100px;text-align: right;}
                  }
                }
                .params{padding: 30px;
                  .el-form-item{margin-bottom: 0;}
                }
              }
            }
            .powertop{ display: flex; width: 640px; }
            .powertopli{ cursor: pointer;flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .con{  background: #FFFFFF; padding: 30px 40px; display: flex; justify-content: space-between;
                .conleft{
                    .flex{ display: flex; margin-bottom: 20px;}
                    .gong{ margin-right: 30px; color: #333}
                }
                .conright{
                    .el-input__inner{ line-height: 40px !important; height: 40px !important;}
                }
            }
            .conlist{ padding: 30px; background: #FFFFFF;
                .flex{ display: flex; justify-content: space-between}
                .gong{ display: flex;align-items: center;margin-bottom: 30px;
                    // .el-button--danger{ border: 0;}
                    // .el-button--primary{ padding: 10px 30px; background: #EEF7FF; border: 1px #EEF7FF solid; margin-left: 20px;}
                    // .el-date-editor--month{ margin-right: 20px;}
                }
                .ggong{
                  .el-button--danger{padding: 9px 30px!important;}
                }
                .gl{ margin-bottom: 20px;
                    // .el-input__inner{ width: 200px;}
                }
                .btnl{
                    .el-button--danger{padding: 20px 85px!important;font-size: 22px;font-weight: 100;}
                }
                .ml{
                  .el-button--danger{ margin-left: 10px!important;}
                }
                .list{ display: flex; border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px;}
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 15px 0; font-size: 14px;}
                    .tt2{ flex: 1.5}
                    .tt3{flex: 0.8;}
                }
                .el-pagination{ text-align: right; margin: 20px 0}
            }
    	}
      .formflex{display: flex;
        .mobile{color: #FB3535;font-size: 24px;}
        .valwidth{width: 150px;}
        .el-form-item__label{font-weight: bold;}
        .remarkBox{
          display: flex;flex-wrap: wrap;
          .el-form-item{width: 300px;}
          .el-form-item__label,.el-form-item__content{font-size: 14px;}
          .el-form-item__label{width: 80px!important;font-weight: normal;}
          .el-form-item__content{margin-left: 80px!important;}
        }
        .callbtn{
        .el-button--danger{padding: 14px 30px !important;margin-left: 20px;}

        }
        .intention{color: #727272;}
        .logs{
          width: 100%;margin: 10px 0;
          &:before,&:after{content: '';display: block;width: 100%;height: 1px;background: #D8D8D8;}
          .log{
            display: flex;justify-content: space-between;
          .ls{
            padding: 10px 0;width: 100%;font-size: 14px;
            .list{display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 6px 0;
              .remark{width: 220px;height: 16px;overflow: hidden;}
            }
            .sucess{color: #51C93F;}
            .error{color:#D65757;}
          }
          .audioplay{
            #audio{
              height: 34px;
              &:focus {
                outline: -webkit-focus-ring-color auto 0px;
              }
            }
          }

          }
        }
        .el-input__inner{ width: 200px;}
        .lineflex{display: flex;
          .el-button--text{height: 40px;margin-left: 20px;}
        }

      }
      .el-button--info{background: #999;border-color: #999;padding: 9px 30px;
        &:hover{background: #999;border-color: #999;}
      }
      .col{flex-direction: column;margin-bottom: 22px;}
      .formsubmit{justify-content: center;align-items: center;
        .el-button--danger{padding: 14px 30px !important;margin-left: 0;}
        .el-button--success{padding: 14px 30px !important;margin-left: 20px;}
        .collection{
          display: flex;align-items: center;cursor: pointer;
          .el-icon-star-off{font-size: 16px}
          .el-icon-star-on{color: #FFAA00;font-size: 20px;}
        }
      }
      .lvse{color: rgb(6, 175, 0);}
    }
</style>
